<template>
  <div class="evaluation">
    <mt-header title="知识评价">
      <c-router-back slot="left"></c-router-back>
    </mt-header>
    <!-- 学科选择 -->
    <div class="subject-choose">
      <div class="tab-wrap">
        <div class="tab-nav bbi clearfix">
          <div class="nav-item on-active" :class="{active:tabActive === 'chinese'}" @click="changeTab('chinese')"><span class="trans">语文</span></div>
          <div class="nav-item on-active" :class="{active:tabActive === 'math'}" @click="changeTab('math')"><span class="trans">数学</span></div>
          <div class="nav-item on-active" :class="{active:tabActive === 'english'}" @click="changeTab('english')"><span class="trans">英语</span></div>
          <div class="nav-item on-active" :class="{active:tabActive === 'politics'}" @click="changeTab('politics')"><span class="trans">政治</span></div>
          <div class="nav-item on-active" :class="{active:tabActive === 'history'}" @click="changeTab('history')"><span class="trans">历史</span></div>
          <div class="nav-item on-active" :class="{active:tabActive === 'geography'}" @click="changeTab('geography')"><span class="trans">地理</span></div>
        </div>
      </div>
    </div>
    <!-- 试题列表 -->
    <div class="knowledge-title">
      <div class="knowledge-name f12 fl">知识点及对应试题</div>
      <div class="knowledge-probability f12">得分率</div>
    </div>
    <div class="knowledgepoint-wrap">
      <div class="knowledgeponit-list p15 clearfix bg-white bbi" v-for="i in 10">
        <div class="knowledgeponit-name f14 fl">归纳内容要点，概括中心意思
          <div class="small f12 mt10">A2、A3、A12</div>
        </div>
        <mt-progress :value="60" :bar-height="6">
          <div slot="end" class="f12 knowledgeponit-probability">60%</div>
        </mt-progress>
      </div>
    </div>
  </div>
</template>

<script>
  // import HeaderComponent from '@/components/header.vue'
  export default {
    data () {
      return {
        tabActive: 'chinese'
      }
    },
    components: {
      // HeaderComponent
    },
    methods: {
      changeTab (tab) {
        this.tabActive = tab
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  @import '../assets/less/_mixins-wln.less';
  .evaluation{
    .knowledge-title{
      background: #f3f5f7;
      padding: 11px 15px;
      color: @gray;
      .knowledge-name{
        width: 70%;
      }
    }
    .knowledgepoint-wrap{
      .knowledgeponit-list{
        background-position: 15px bottom;
        .knowledgeponit-name{
          width: 70%;
          color: @grey;
          .small{
            color: @gray;
          }
        }
        .mt-progress{
          height: 39px;
          line-height:39px;
          .mt-progress-content{
            margin-right: 5px;
            .mt-progress-runway{
              border-radius: 3px;
            }
            .mt-progress-progress{
              border-radius: 3px;
            }

          }
        }
        .knowledgeponit-probability{
          color: @muted;
        }
      }
    }
  }
</style>
